<template>
	<layout>
		<!--Blog留言-->
		<div class="warp">
			<div class="main_l">
				<div class="news_works">
					<!-- 返回首页 -->
					<backIndex title="Blog留言" />
					<div class="blog">
						<div class="form">
							<div class="group">
								<label for="username">姓名</label>
								<input id="username" type="text" v-model="form.username" placeholder="请输入您的姓名">
							</div>
							<div class="group">
								<label for="tel">电话</label>
								<input id="tel" type="text" v-model="form.phone" placeholder="请输入您的电话（选填）">
							</div>
							<div class="group">
								<label for="email">邮箱</label>
								<input id="email" type="email" v-model="form.email" placeholder="请输入您的邮箱（选填）">
							</div>
							<div class="group">
								<label for="content">内容</label>
								<textarea id="textarea" placeholder="留言内容" v-model="form.content"></textarea>
							</div>
							<button class="submit" @click="submit()">提交</button>
						</div>
					</div>
				</div>
			</div>
			<!-- 主要右边 -->
			<mainR />
		</div>
	</layout>
</template>

<script>
	import layout from '@/layout/index.vue'
	import backIndex from "@/components/backIndex";
	import mainR from "@/components/mainR";
	// import {create} from '@/api/message.js'
	export default {
		components: {
			layout,
			mainR,
			backIndex
		},
		data() {
			return {
				form: {
					username: '',
					phone: '',
					email: '',
					content: '',
				}
			};
		},
		mounted() {},
		computed: {},
		methods: {
			submit() {
				console.log('form', this.form)
				if (!this.form.username) {
					return this.$tools.toast('姓名不能为空')
				}
				let data = Object.assign(this.form)
				console.log('data', data)
				const that = this
				uni.showLoading({
					title: '提交中',
					mask: true
				});
				this.$Ajax('addMessage', data, res => {
					uni.hideLoading();
					if (res.code == 200) {
						this.rest()
						this.$tools.toast('提交成功')
					} else {
						this.$tools.toast(res.message)
					}
				},err=>{
					uni.hideLoading();
					console.log('err',err)
				})
			},
			rest() {
				this.form = {
					username: '',
					phone: '',
					email: '',
					content: '',
				}
			}
		},
	};
</script>
<style scoped>
</style>